<template>
  <div>
    <div class="tost-box">
      <!-- <img src="../../../../static/image/tanhao.png"> -->
      <span>您有{{ eunumber }}个任务超时未处理</span>
      <!-- EUNumber;//超时任务个数 -->
    </div>
    <div style="display: flex;justify-content: space-between;">
      <div>
        <!-- <Checkbox :value="single" @on-change="handleSelectAll">全选</Checkbox> -->
        <Button @click="batchDeal" :disabled="!selection.length">批量处理</Button>
      </div>
    </div>
    <Table :columns="columns" :row-class-name="rowClassName" :data="pcWorkIndexSupervisorListVO.records"
      :loading="isLoading" ref="selection" @on-selection-change="selectionChange" style="margin-top:10px">
      <template slot-scope="{ row }" slot="payYears">
        <span>{{ row.payYear + "/" + row.payYears + row.payintv }}</span>
      </template>
      <template slot-scope="{ row }" slot="planDate">
        <span>{{ row.planDate ? row.planDate.slice(0, 10) : '' }}</span>
      </template>
      <template slot-scope="{ row }" slot="operate">
        <span class="table-button" @click="forward(row)">去处理</span>
      </template>
    </Table>

    <Page :total="ipagination.total" show-sizer show-total style="text-align:right;margin-top:20px"
      @on-change="handleCurrentChange" @on-page-size-change="handleSizeChange"
      :page-size-opts="ipagination.pageSizeOptions" :current="ipagination.pageIndex" :page-size="ipagination.pageSize"
      transfer></Page>
  </div>
</template>


<script>
import { loadResourcesMixin } from "../../../util/mixins/loadResourcesMixin";
import { tableChangeMixin } from "../../../util/mixins/tableChangeMixin";
export default {
  name: "supervise",
  mixins: [loadResourcesMixin, tableChangeMixin],
  data() {
    return {
      mixinData: {
        tableAxios: "getPCWorkIndex",
      },
      single: false,
      selectLength: 0,
      selection: [],
      eunumber: 0,
      columns: [
        {
          type: "selection",
          align: "center",
          fixed: "left",
          width: 60,
        },
        {
          title: "序号",
          type: "index",
          align: "center",
          width: 80,
        },
        {
          title: "保单号",
          key: "contNo",
          align: "center",
          width: "180",
        },
        {
          title: "投保人",
          key: "appntName",
          align: "center",
          width: "130",
        },
        {
          title: "应交日",
          key: "payToDay",
          align: "center",
          width: "130",
        },
        {
          title: "应交次数",
          slot: "payYears",
          align: "center",
          width: "110",
        },
        {
          title: "应收保费",
          // key: "paymoney",
          key: "premium",
          align: "center",
          width: "140",
        },
        {
          title: "计划工作时间",
          slot: "planDate",
          align: "center",
          width: "160",
        },
        {
          title: "计划工作方式",
          key: "planWorkType",
          align: "center",
          minWidth: 140,
        },
        {
          title: "业务员",
          key: "agentName",
          align: "center",
          width: "170",
        },
        {
          title: "操作",
          key: "operate",
          slot: "operate",
          align: "center",
          width: "130",
          fixed: "right",
        },
      ],
      pcWorkIndexSupervisorListVO: { records: [] },
    };
  },
  created() {
    this.form.agentSelectType = 0;
  },
  methods: {
    rowClassName(row, index) {
      // if (index + this.ipagination.pageSize * this.ipagination.index < this.eunumber) return "table-bgc";
      if (row.disposestate == 'F') return "table-bgc";
    },
    // 工作状态跳转
    forward(row) {
      row.contno = row.contNo || row.contno;
      row.planid = row.planId || row.planid;
      row.workid = row.workId || row.workid;
      row.agentcode = row.agentCode || row.agentcode;
      row.paytodate = row.payToDay || row.paytodate;
      if (row.planstatename == "已完成") {
        this.$router.push({
          name: "ServiceDetail",
          query: {
            row: row,
            insuranceType: "supervise",
          },
        });
      } else {
        this.$router.push({
          name: "ServiceDetail",
          query: {
            selection: JSON.stringify(row),
            insuranceType: "supervise",
          },
        });
      }
    },
    // 批量处理跳转
    batchDeal() {
      if (this.selectLength <= 0) {
        this.$Message.error("未选择计划，不可进行此操作");
        return;
      }
      let i = 0;
      this.selection.some(function (element) {
        if (element.planstatename == "已完成") {
          return true;
        } else {
          i++;
        }
      });
      if (i === this.selection.length) {
        let selectionCopy = [];
        let j = 0;
        this.selection.forEach((element) => {
          element.contno = element.contNo || element.contno;
          element.planid = element.planId || element.planid;
          element.workid = element.workId || element.workid;
          element.agentcode = element.agentCode || element.agentcode;
          element.paytodate = element.payToDay || element.paytodate;
          if (selectionCopy.includes(element.appntid)) {
            j++;
          } else {
            selectionCopy.push(element.appntid);
          }
        });
        // if (j === this.selection.length - 1) {
        this.$router.push({
          name: "ServiceDetail",
          query: {
            selection: JSON.stringify(this.selection),
            insuranceType: "supervise",
          },
        });
        // } else {
        //   this.$Message.info("批量处理中投保人编号必须相同");
        // }
      } else {
        this.$Message.info("计划中不能包含已完成的计划");
      }
    },
    // 表格多选获取数据
    selectionChange(selection) {
      this.selection = selection;
      this.selectLength = selection.length;
    },
    // 全选
    handleSelectAll() {
      console.log("this.selection.length", this.selection.length);

      if (this.selection.length == 1) {
        this.$refs.selection.selectAll(false);
        this.$nextTick(() => (this.single = false));
      } else {
        this.$refs.selection.selectAll(true);
        this.$nextTick(() => (this.single = true));
      }
    },
    tableThen(res) {
      this.eunumber = res.data.eunumber;
      this.pcWorkIndexSupervisorListVO = res.data.pcWorkIndexSupervisorListVO;
    },
    updateIpagination(res) {
      let data = res.data.pcWorkIndexSupervisorListVO;
      this.ipagination.total =
        +data.total || (data.total == 0 ? 0 : this.ipagination.total);
      this.ipagination.index = +data.current || this.ipagination.index;
      this.ipagination.pageSize = +data.size || this.ipagination.pageSize;
    },
  },
};
</script>
<style scoped>
.tost-box {
  display: flex;
  align-items: center;
  padding: 10px;
  background: #fff7ea;
  border-radius: 4px;
  color: #ee8623;
  font-size: 14px;
  margin-bottom: 10px;
}

.tost-box>img {
  width: 14px;
  height: 14px;
  margin-right: 10px;
}
</style>
